<template>
    <!--新的朋友组件 交互没写完-->
    <div :class="{'search-open-contact':!$store.state.headerStatus}">
        <header id="wx-header">
            <!-- <div class="other"><span>添加朋友</span></div> -->
            <div class="center">
                <router-link to="/contact" tag="div" class="iconfont icon-return-arrow">
                    <span></span>
                </router-link>
                <span>新的朋友</span>
            </div>
        </header>
         <!--这里的 search 组件的样式也需要修改一下-->
        <search></search>
        <!-- <div class="weui-cells margin-top-0">
            <router-link to="/contact/new-friends/mobile-contacts" tag="div" class="weui-cell">
                <dl class="add-tel-address">
                    <dt><span class="iconfont icon-iphone-address"></span></dt>
                    <dd>添加手机联系人</dd>
                </dl>
            </router-link>
        </div> -->
        <div class="weui-cells message-list">
            <div class="message-list-box" v-for="(item,index) in newFriends" :key="index">
                
                    <!-- 当我发起好友申请时 -->
                <router-link  class="weui-cell" v-if="item.uid == uid" :to="{path:'/contact/details',query:{wxid:item.mid}}">
                    <div class="weui-cell__hd">
                        <img :src="item.getMid.headimg" alt=""> 
                    </div>
                    <div class="weui-cell__bd weui-cell_primary">
                        <p><b>{{item.getMid.nickname}}</b></p>
                        <p><span>我：{{item.desc}}</span></p>
                    </div>
                    <div class="weui-cell__ft">{{status[item.status]}}</div>
                </router-link>

                <!-- 当对方发起好友申请时 -->
                <router-link  class="weui-cell" v-else   :to="{path:'/contact/details',query:{wxid:item.uid}}">
                    <div class="weui-cell__hd">
                        <img :src="item.getUid.headimg" alt=""> 
                    </div>
                    <div class="weui-cell__bd weui-cell_primary">
                        <p><b>{{item.getUid.nickname}}</b></p>
                        <p><span>{{item.desc}}</span></p>
                    </div>
                    <div class="weui-cell__ft">
                        <span v-if="item.status!=0">{{status[item.status]}}</span>
                        <a v-else href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary" @click.stop="passFriends(index)">接受</a>
                    </div>
                </router-link>
                
            </div>

        </div>
    </div>
</template>
<script>
import { ApiGetNewFriends, ApiPassFriends } from '@/api/api/Client'
    import search from "../common/search"
    export default {
        components: {
            search
        },
        data() {
            return {
                pageName: "新的朋友",
                newFriends:[],//新朋友列表
                uid:this.$store.state.uid,
                // 我发起的好友申请
                status:{
                    0:'等待验证',
                    1:'已添加',
                    2:'已拒绝'
                }
            }
        },
        mounted(){
            this.init()
        },
        methods:{
            init(){
                ApiGetNewFriends().then(({data})=>{
                    this.newFriends = data
                })
            },
            /**
             * 通过好友申请
             */
            passFriends(index){
                let item = this.newFriends[index]
                let id = item.id
                // 发起请求
                let params = {
                    id,
                    status:1,// 1 通过 2 拒绝
                    msg:'',// 拒绝的原因
                }
                //通过好友
                ApiPassFriends(params).then(({data,msg})=>{
                    item.status = 1
                })
            }
        }
    }
</script>
<style lang="less">
    @import "../../assets/less/new-friends.less";

    .message-list-box{
        border-top: 1px solid #d9d9d9;
    }
</style>